<script setup lang="ts">
import {ref} from "vue";
import {renderIcon} from "@/utils/xicons.ts";
import {message} from "@/utils/message.ts";
import {useUserStore} from "@/stores/user.store.ts";
import {useRouter} from "vue-router";


const router = useRouter();
const userStore = useUserStore();
const userAvatar = ref("/src/assets/image/picture.png");


const headerMenuOptions = ref([
    {
        label: "个人中心",
        key: "/profile",
        icon: () => renderIcon("User")
    },
    {
        label: "注销退出",
        key: "/logout",
        icon: () => renderIcon("Logout")
    }
]);


const handleMenuSelect = async (key: string) => {
    switch (key) {
        case "/profile":
            message.info("profile");
            break;
        case "/logout":
            userStore.clearUserAuthorization();
            message.success("注销成功");
            await router.push("/login");
            break;
    }
}
</script>

<template>
    <div class="header-menu">
        <n-dropdown :options="headerMenuOptions" @select="handleMenuSelect">
            <div class="profile">
                <n-avatar :src="userAvatar" round/>
                <span class="name">
                    {{ userStore.userInfo.nickname ? userStore.userInfo.nickname : userStore.userInfo.username }}
                </span>
            </div>
        </n-dropdown>
    </div>
</template>

<style lang="scss">
.header-menu {
    cursor: pointer;

    .profile {
        display: flex;
        align-items: center;
        gap: 12px;

        .name {
            line-height: 34px;
        }
    }
}
</style>